<template>
  <div>
    <el-dialog title="费用明细选择" v-model="open" width="50vw" append-to-body>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline" label-width="120px">
        <el-form-item label="费用明细" prop="projectNo">
          <el-input v-model="queryParams.subjectName" placeholder="请输入费用明细" clearable @keyup.enter="search" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="subjectList" style="width: 100%" @selection-change="selectChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="subjectName" label="费用明细" align="center" />
        <el-table-column prop="accountName" label="费用类别" align="center" />
        <el-table-column prop="distribution" label="分配方式" align="center">
          <template #default="scope">
            <dict-tag :options="distribution_mode" :value="scope.row.distribution" />
          </template>
        </el-table-column>
        <el-table-column prop="redgerType" label="台账类型" align="center">
          <template #default="scope">
            <dict-tag :options="redger_type" :value="scope.row.redgerType" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submit">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="js">
import { ref, inject, nextTick } from 'vue';
import {
  listSubject
} from "@/api/cost/subjectList";

// 字典引入
const { proxy } = getCurrentInstance();
const { distribution_mode, redger_type } = proxy.useDict(
  'distribution_mode',
  'redger_type'
);

const subList = ref()
const total =ref()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  redgerType:'-1'
})
const props = defineProps(['open', 'title', 'update', 'updateId', "redgerType"])
const emit = defineEmits(['update:open', 'update:update'])

//父组件传过来的数据
const open = ref()
const title = ref()
const update = ref()
const updateId = ref()
// 弹框打开
watch(props, (newProps) => {
  open.value = newProps.open
  title.value = newProps.title
  update.value = newProps.update
  updateId.value = newProps.updateId
  changeState()
}), { immediate: true }


const subSelectList = inject('selectSubOption')


// // 计算属性 selectAllIds
const selectAllIds = computed(() => {
  return subSelectList.value.map((item) => item.subjectId);
});


//监听open的变化回传给父组件
watch(open, (newOpen) => {
  emit('update:open', newOpen)
})



//搜索
const search = () => {
  getList()
}
//获取列表数据
const subjectList = ref()
const getList = () => {
  listSubject(queryParams.value)
    .then((res) => {
      subjectList.value = res.rows;
    total.value = res.total;

    })
    .catch((error) => {
      console.log(error);
    });
};

// 改变状态
const changeState = async() => {
  // debugger
  await nextTick()
    // if (proxy.$refs.multipleTable) {
    proxy.$refs.multipleTable.clearSelection()
    if (selectAllIds.value.length) {
      for (let i = 0; i < subjectList.value.length; i++) {
        if (selectAllIds.value.includes(subjectList.value[i].id)) {
          proxy.$refs.multipleTable.toggleRowSelection(subjectList.value[i], true);
        }
      }
    }
  // }
  
};

//选择数据之后传回去
const selectChange = (selection) => {
  subList.value = JSON.parse(JSON.stringify(selection))
  subList.value = subList.value.map((item,index) => {
    return {
      ...item,
      cost: 0// 添加cost字段，并设置初始值为0
    };
  });
}

const submit = () => {
  proxy.$bus.emit('commitColumn', subList.value)
  open.value = false
}
getList()
</script>
<style scoped>
.el-dialog .pagination-container{
  position: relative !important;
}</style>
